<template>
  <s-layout :mainBackground="'#FFEDC7'" class="chat-wrap" color="#000000" :title="state.title" navbar="inner"
            :is_main-body="true"
            :customBody="customBody()" :is_mainBody="false" :bg-style="{color:'#FFEDC7'}"
            :is_back="true" backgroundColor="#FFEDC7"
            onShareAppMessage
            :ncShareInfo="page.ncShareInfo"
  >
    <view class="wh_750 flex-sub bg_FFEDC7">
      <su-tabs id="suTabs" class="suTabs" :class="`tabs_${state.current}`"
               :list="state.listHeader"
               :current="state.current"
               lineColor="transparent"
               :scrollable="true"
               :itemStyle="itemStyle()"
               lineWidth="62rpx"
               :activeStyle="activeStyle()"
               :inactiveStyle="inactiveStyle()"
               @change="onChange"
      />
      <chinese-surname v-if="state.current == 0" :list="chineseSurname.list"
                       :page-height="`${upx2px(63) + layoutStyle.statusHeight}px`"
                       @setSelectCode="getChineseSurname"></chinese-surname>
      <ancestors-roots v-if="state.current == 1"
                       :page-height="`${upx2px(63) + layoutStyle.statusHeight}px`"
                       @setSelectCode="getEmperorList"></ancestors-roots>
      <commemorate-heroes v-if="state.current == 2"
                          :page-height="`${upx2px(63) + layoutStyle.statusHeight}px`"
                          @setSelectCode="getCommemorateHeroes"></commemorate-heroes>
      <history-today v-if="state.current == 3"
                     :page-height="`${upx2px(63) + layoutStyle.statusHeight}px`"></history-today>
      <festival-solar-term v-if="state.current == 4"
                           :page-height="`${upx2px(63) + layoutStyle.statusHeight}px`"
                           :solarTermFestivalList="solarTermFestivalList"></festival-solar-term>
      <chinese-almanac v-if="state.current == 5"
                       :page-height="`${upx2px(63) + layoutStyle.statusHeight}px`"></chinese-almanac>
    </view>
  </s-layout>
</template>

<script setup>
  import { getCurrentInstance, nextTick, onMounted, reactive, computed } from 'vue';
  import SuTabs from '@/sheep/ui/su-tabs/su-tabs.vue';
  import ChineseSurname from '@/pages/chineseSurname/components/chineseSurname.vue';
  import AncestorsRoots from '@/pages/chineseSurname/components/ancestorsRoots.vue';
  import CommemorateHeroes from '@/pages/chineseSurname/components/commemorateHeroes.vue';
  import HistoryToday from '@/pages/chineseSurname/components/historyToday.vue';
  import FestivalSolarTerm from '@/pages/chineseSurname/components/festivalSolarTerm.vue';
  import ChineseAlmanac from '@/pages/chineseSurname/components/chineseAlmanac.vue';
  import sheep from '@/sheep';
  import { onLoad, onShow } from '@dcloudio/uni-app';

  const { proxy } = getCurrentInstance();

  const customBody = () => {
    return {
      'display': 'flex',
      'flex-direction': 'column',
      'align-items': 'center',
    };
  };
  const upx2px = (rpx) => {
    return uni.upx2px(rpx);
  };
  const state = reactive({
    listHeader: [
      { name: '中华姓氏' },
      { name: '拜祖寻根' },
      { name: '缅怀英烈' },
      { name: '历史今天' },
      { name: '节日节气' },
      { name: '老黄历' },
    ],
    current: 0,
    title: '中华姓氏',
  });
  const chineseSurname = reactive({
    list: [],
  });
  const solarTermFestivalList = reactive({
    list: [],
  });
  const layoutStyle = reactive({
    suTabsHeight: 0,
    statusHeight: sheep.$platform.navbar,
  });
  const page = reactive({
    options: {},
    ncShareInfo: {},
  });
  const userInfo = computed(() => sheep.$store('user').userInfo);
  const mp_code = computed(() => sheep.$store('AI').mp_code);
  const version = computed(() => sheep.$store('AI').version);
  const appVersion = computed(() => sheep.$store('app').info.worship_version);


  const itemStyle = () => {
    return {
      'padding': 0,
      'border-radius': '14rpx 14rpx 0 0',
      'font-weight': '500',
      'width': '160rpx',
      'height': '80rpx',
      'line-height': '80rpx',
      'font-size': '32rpx',
    };
  };
  const activeStyle = () => {
    return {
      'width': '160rpx',
      'height': '80rpx',
      'color': '#FFFFFF',
      'background': '#CC8A00',
      'display': 'flex',
      'align-items': 'center',
      'justify-content': 'center',
      'overflow': 'hidden',
      'border-radius': '14rpx 14rpx 0 0',
      'font-size': '32rpx',
    };
  };
  const inactiveStyle = () => {
    return {
      'width': '160rpx',
      'height': '80rpx',
      'color': '#292929',
      'background': '#FAE6BC',
      'display': 'flex',
      'align-items': 'center',
      'justify-content': 'center',
      'overflow': 'hidden',
      'border-radius': '14rpx 14rpx 0 0',
      'font-size': '32rpx',
    };
  };
  const bind_id = computed(() => sheep.$store('AI').bind_id);
  onLoad((options) => {
    page.options = options;
    if (!!options.id) {
      sheep.$store('AI').setBindId(options.id);
    }

    if (!!options.spid) {
      sheep.$store('AI').setBindId(options.spid);
    }
    page.ncShareInfo = {
      title: `${state.founder.surname}姓始祖`,
      path: `/pages/chineseSurname/index?spid=${userInfo.value.uid}`,
    };
  });

  onShow(async () => {
    if (!!bind_id.value && !!isLogin.value) {
      const { code } = await sheep.$api.user.bindParent({ parent_id: bind_id.value });
      if (code == 1) {
        sheep.$store('AI').setBindId('');
      }
    }
    if (mp_code.value == appVersion.value) {
      state.listHeader = [
        { name: '中华姓氏' },
        { name: '拜祖寻根' },
        { name: '英雄事迹' },
        { name: '历史今天' },
        { name: '节日节气' },
        { name: '老黄历' },
      ];
    }
  });

  onMounted(() => {
    nextTick(() => {
      if (!!page.options.index) {
        state.current = Number(page.options.index);
      }
    });
  });

  function onChange(info) {
    state.current = info.index;
    state.title = info.name;
  }
</script>


<style scoped lang="scss">
  .suTabs {
    ::v-deep .u-tabs {
      background: transparent !important;
      border: none !important;
    }

    /* #ifdef H5 */
    background: transparent !important;
    border: none !important;
    /* #endif */
  }

  .tabs {
    @for $value from 1 through 750 {
      &_#{$value} {
        ::v-deep .u-tabs__wrapper__nav__item-#{$value} {
          background: #CC8A00;
        }
      }
    }
  }
</style>
